thisislawatts / coverimage

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var elementResizeDetectorMaker = require('element-resize-detector');

var elems = document.body.querySelectorAll('[data-cover-image]');

elems.forEach(function (el) {

});

//# sourceMappingURL=coverimage.js.map

},{"element-resize-detector":8}],2:[function(require,module,exports){

"use strict";

var utils = require("./utils");

module.exports = function batchProcessorMaker(options) {

    options             = options || {};

    var reporter        = options.reporter;

    var asyncProcess    = utils.getOption(options, "async", true);

    var autoProcess     = utils.getOption(options, "auto", true);

    if(autoProcess && !asyncProcess) {

        reporter && reporter.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true.");

        asyncProcess = true;

    }

    var batch = Batch();

    var asyncFrameHandler;

    var isProcessing = false;

    function addFunction(level, fn) {

        if(!isProcessing && autoProcess && asyncProcess && batch.size() === 0) {

            // Since this is async, it is guaranteed to be executed after that the fn is added to the batch.

            // This needs to be done before, since we're checking the size of the batch to be 0.

            processBatchAsync();

        }

        batch.add(level, fn);

    }

    function processBatch() {

        // Save the current batch, and create a new batch so that incoming functions are not added into the currently processing batch.

        // Continue processing until the top-level batch is empty (functions may be added to the new batch while processing, and so on).

        isProcessing = true;

            var processingBatch = batch;

            batch = Batch();

            processingBatch.process();

        }

        isProcessing = false;

    }

    function forceProcessBatch(localAsyncProcess) {

        if (isProcessing) {

            return;

        }

        if(localAsyncProcess === undefined) {

            localAsyncProcess = asyncProcess;

        }

        if(asyncFrameHandler) {

            cancelFrame(asyncFrameHandler);

            asyncFrameHandler = null;

        }

        if(localAsyncProcess) {

            processBatchAsync();

        } else {

            processBatch();

        }

    }

    function processBatchAsync() {

        asyncFrameHandler = requestFrame(processBatch);

    }

        batch           = {};

    }

    function cancelFrame(listener) {

        // var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;

        return cancel(listener);

    }

    function requestFrame(callback) {

        // var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(fn) { return window.setTimeout(fn, 20); };

        var raf = function(fn) { return setTimeout(fn, 0); };

        return raf(callback);

    }

    return {

        add: addFunction,

        force: forceProcessBatch

    };

};

function Batch() {

    var batch       = {};

    var size        = 0;

    var topLevel    = 0;

    var bottomLevel = 0;

    function add(level, fn) {

        if(!fn) {

            fn = level;

            level = 0;

        }

        if(level > topLevel) {

            topLevel = level;

        } else if(level < bottomLevel) {

            bottomLevel = level;

        }

        if(!batch[level]) {

            batch[level] = [];

        }

        batch[level].push(fn);

        size++;

    }

    function process() {

        for(var level = bottomLevel; level <= topLevel; level++) {

            var fns = batch[level];

            for(var i = 0; i < fns.length; i++) {

                var fn = fns[i];

                fn();

            }

        }

    }

    function getSize() {

        return size;

    }

    return {

        add: add,

        process: process,

        size: getSize

    };

}

},{"./utils":3}],3:[function(require,module,exports){

"use strict";

var utils = module.exports = {};

utils.getOption = getOption;

function getOption(options, name, defaultValue) {

    var value = options[name];

    if((value === undefined || value === null) && defaultValue !== undefined) {

        return defaultValue;

    }

    return value;

}

},{}],4:[function(require,module,exports){

"use strict";

var detector = module.exports = {};

detector.isIE = function(version) {

    function isAnyIeVersion() {

        return agent.indexOf("msie") !== -1 || agent.indexOf("trident") !== -1 || agent.indexOf(" edge/") !== -1;

    }

    if(!isAnyIeVersion()) {

        return false;

    }

    if(!version) {

        return true;

    }

    //Shamelessly stolen from https://gist.github.com/padolsey/527683

    var ieVersion = (function(){

        var undef,

            v = 3,

            div = document.createElement("div"),

            all = div.getElementsByTagName("i");

        do {

            div.innerHTML = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->";

        }

        while (all[0]);

    }());

    return version === ieVersion;

};

detector.isLegacyOpera = function() {

    return !!window.opera;

};

},{}],5:[function(require,module,exports){

"use strict";

var utils = module.exports = {};

/**

 * Loops through the collection and calls the callback for each element. if the callback returns truthy, the loop is broken and returns the same value.

 * @public

 * @param {*} collection The collection to loop through. Needs to have a length property set and have indices set from 0 to length - 1.

 * @param {function} callback The callback to be called for each element. The element will be given as a parameter to the callback. If this callback returns truthy, the loop is broken and the same value is returned.

 * @returns {*} The value that a callback has returned (if truthy). Otherwise nothing.

 */

utils.forEach = function(collection, callback) {

    for(var i = 0; i < collection.length; i++) {

        var result = callback(collection[i]);

        if(result) {

            return result;

        }

};

},{}],6:[function(require,module,exports){

/**

 * Resize detection strategy that injects objects to elements in order to detect resize events.

 * Heavily inspired by: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

 */

"use strict";

var browserDetector = require("../browser-detector");

module.exports = function(options) {

    options             = options || {};

    var reporter        = options.reporter;

    var batchProcessor  = options.batchProcessor;

    var getState        = options.stateHandler.getState;

    if(!reporter) {

        throw new Error("Missing required dependency: reporter.");

    }

    /**

     * Adds a resize event listener to the element.

     * @public

     * @param {element} element The element that should have the listener added.

     * @param {function} listener The listener callback to be called for each resize event of the element. The element will be given as a parameter to the listener callback.

     */

    function addListener(element, listener) {

        if(!getObject(element)) {

            throw new Error("Element is not detectable by this strategy.");

        }

        function listenerProxy() {

            listener(element);

        }

        if(browserDetector.isIE(8)) {

            //IE 8 does not support object, but supports the resize event directly on elements.

            getState(element).object = {

                proxy: listenerProxy

            };

            element.attachEvent("onresize", listenerProxy);

        } else {

            var object = getObject(element);

            object.contentDocument.defaultView.addEventListener("resize", listenerProxy);

        }

    }

    /**

     * Makes an element detectable and ready to be listened for resize events. Will call the callback when the element is ready to be listened for resize changes.

     * @private

     * @param {object} options Optional options object.

     * @param {element} element The element to make detectable

     * @param {function} callback The callback to be called when the element is ready to be listened for resize changes. Will be called with the element as first parameter.

     */

    function makeDetectable(options, element, callback) {

        if (!callback) {

            callback = element;

            element = options;

            options = null;

        }

        options = options || {};

        function injectObject(element, callback) {

            var OBJECT_STYLE = "display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0; opacity: 0; z-index: -1000; pointer-events: none;";

            //The target element needs to be positioned (everything except static) so the absolute positioned object will be positioned relative to the target element.

            // Position altering may be performed directly or on object load, depending on if style resolution is possible directly or not.

            var positionCheckPerformed = false;

            // The element may not yet be attached to the DOM, and therefore the style object may be empty in some browsers.

            // Since the style object is a reference, it will be updated as soon as the element is attached to the DOM.

            var style = window.getComputedStyle(element);

            var width = element.offsetWidth;

            var height = element.offsetHeight;

            getState(element).startSize = {

                width: width,

                height: height

            };

            function mutateDom() {

                function alterPositionStyles() {

                    if(style.position === "static") {

                        element.style.position = "relative";

                        var removeRelativeStyles = function(reporter, element, style, property) {

                            function getNumericalValue(value) {

                                return value.replace(/[^-\d\.]/g, "");

                            }

                            var value = style[property];

                            if(value !== "auto" && getNumericalValue(value) !== "0") {

                                reporter.warn("An element that is positioned static has style." + property + "=" + value + " which is ignored due to the static positioning. The element will need to be positioned relative, so the style." + property + " will be set to 0. Element: ", element);

                                element.style[property] = 0;

                            }

                        };

                        //Check so that there are no accidental styles that will make the element styled differently now that is is relative.

                        //If there are any, set them to 0 (this should be okay with the user since the style properties did nothing before [since the element was positioned static] anyway).

                        removeRelativeStyles(reporter, element, style, "top");

                        removeRelativeStyles(reporter, element, style, "right");

                        removeRelativeStyles(reporter, element, style, "bottom");

                        removeRelativeStyles(reporter, element, style, "left");

                    }

                }

                function onObjectLoad() {

                    // The object has been loaded, which means that the element now is guaranteed to be attached to the DOM.

                    if (!positionCheckPerformed) {

                        alterPositionStyles();

                    }

                    /*jshint validthis: true */

                    function getDocument(element, callback) {

                        //Opera 12 seem to call the object.onload before the actual document has been created.

                        //So if it is not present, poll it with an timeout until it is present.

                        //TODO: Could maybe be handled better with object.onreadystatechange or similar.

                        if(!element.contentDocument) {

                            setTimeout(function checkForObjectDocument() {

                                getDocument(element, callback);

                            }, 100);

                            return;

                        }

                        callback(element.contentDocument);

                    }

                    //Mutating the object element here seems to fire another load event.

                    //Mutating the inner document of the object element is fine though.

                    var objectElement = this;

                    //Create the style element to be added to the object.

                        //Notify that the element is ready to be listened to.

                        callback(element);

                    });

                }

                // The element may be detached from the DOM, and some browsers does not support style resolving of detached elements.

                // The alterPositionStyles needs to be delayed until we know the element has been attached to the DOM (which we are sure of when the onObjectLoad has been fired), if style resolution is not possible.

                if (style.position !== "") {

                    positionCheckPerformed = true;

                }

                //Add an object element as a child to the target element that will be listened to for resize events.

                var object = document.createElement("object");

                object.style.cssText = OBJECT_STYLE;

                object.tabIndex = -1;

                object.type = "text/html";

                object.onload = onObjectLoad;

                //Safari: This must occur before adding the object to the DOM.

                //IE: Does not like that this happens before, even if it is also added after.

                if(!browserDetector.isIE()) {

                    object.data = "about:blank";

                }

                element.appendChild(object);

                getState(element).object = object;

                //IE: This must occur after adding the object to the DOM.

                if(browserDetector.isIE()) {

                    object.data = "about:blank";

                }

            }

            if(batchProcessor) {

                batchProcessor.add(mutateDom);

            } else {

                mutateDom();

            }

        }

        if(browserDetector.isIE(8)) {

            //IE 8 does not support objects properly. Luckily they do support the resize event.

            //So do not inject the object and notify that the element is already ready to be listened to.

            //The event handler for the resize event is attached in the utils.addListener instead.

            callback(element);

        } else {

            injectObject(element, callback);

        }

    }

    /**

     * Returns the child object of the target element.

     * @private

     * @param {element} element The target element.

     * @returns The object element of the target.

     */

    function getObject(element) {

        return getState(element).object;

    }

    function uninstall(element) {

        if(browserDetector.isIE(8)) {

            element.detachEvent("onresize", getState(element).object.proxy);

        } else {

            element.removeChild(getObject(element));

        }

        delete getState(element).object;

    }

    return {

        makeDetectable: makeDetectable,

        addListener: addListener,

        uninstall: uninstall

    };

};

},{"../browser-detector":4}],7:[function(require,module,exports){

/**

 * Resize detection strategy that injects divs to elements in order to detect resize events on scroll events.

 * Heavily inspired by: https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

 */

"use strict";

var forEach = require("../collection-utils").forEach;

module.exports = function(options) {

    options             = options || {};

    var reporter        = options.reporter;

    var batchProcessor  = options.batchProcessor;

    var getState        = options.stateHandler.getState;

    var idHandler       = options.idHandler;

    if (!batchProcessor) {

        throw new Error("Missing required dependency: batchProcessor");

    }

    if (!reporter) {

        throw new Error("Missing required dependency: reporter.");

    }

    //TODO: Could this perhaps be done at installation time?

    var scrollbarSizes = getScrollbarSizes();

    // Inject the scrollbar styling that prevents them from appearing sometimes in Chrome.

    // The injected container needs to have a class, so that it may be styled with CSS (pseudo elements).

    var styleId = "erd_scroll_detection_scrollbar_style";

    var detectionContainerClass = "erd_scroll_detection_container";

    injectScrollStyle(styleId, detectionContainerClass);

    function getScrollbarSizes() {

        var width = 500;

        var height = 500;

        var child = document.createElement("div");

        child.style.cssText = "position: absolute; width: " + width*2 + "px; height: " + height*2 + "px; visibility: hidden; margin: 0; padding: 0;";

        var container = document.createElement("div");

        container.style.cssText = "position: absolute; width: " + width + "px; height: " + height + "px; overflow: scroll; visibility: none; top: " + -width*3 + "px; left: " + -height*3 + "px; visibility: hidden; margin: 0; padding: 0;";

        container.appendChild(child);

        document.body.insertBefore(container, document.body.firstChild);

        var widthSize = width - container.clientWidth;

        var heightSize = height - container.clientHeight;

        document.body.removeChild(container);

        return {

            width: widthSize,

            height: heightSize

        };

    }

    function injectScrollStyle(styleId, containerClass) {

        function injectStyle(style, method) {

            method = method || function (element) {

                document.head.appendChild(element);

            };

            var styleElement = document.createElement("style");

            styleElement.innerHTML = style;

            styleElement.id = styleId;

            method(styleElement);

            return styleElement;

        }

        if (!document.getElementById(styleId)) {

            var containerAnimationClass = containerClass + "_animation";

            var containerAnimationActiveClass = containerClass + "_animation_active";

            var style = "/* Created by the element-resize-detector library. */\n";

            style += "." + containerClass + " > div::-webkit-scrollbar { display: none; }\n\n";

            style += "." + containerAnimationActiveClass + " { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: " + containerAnimationClass + "; animation-name: " + containerAnimationClass + "; }\n";

            style += "@-webkit-keyframes " + containerAnimationClass +  " { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n";

            style += "@keyframes " + containerAnimationClass +          " { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }";

            injectStyle(style);

        }

    }

    function addAnimationClass(element) {

        element.className += " " + detectionContainerClass + "_animation_active";

    }

    function addEvent(el, name, cb) {

        if (el.addEventListener) {

        } else if(el.attachEvent) {

        } else {

            return reporter.error("[scroll] Don't know how to add event listeners.");

        }

    }

    function removeEvent(el, name, cb) {

        if (el.removeEventListener) {

        } else if(el.detachEvent) {

        } else {

            return reporter.error("[scroll] Don't know how to remove event listeners.");

        }

    }

    function getExpandElement(element) {

        return getState(element).container.childNodes[0].childNodes[0].childNodes[0];

    }

    function getShrinkElement(element) {

        return getState(element).container.childNodes[0].childNodes[0].childNodes[1];

    }

    /**

     * Adds a resize event listener to the element.

     * @public

     * @param {element} element The element that should have the listener added.

     * @param {function} listener The listener callback to be called for each resize event of the element. The element will be given as a parameter to the listener callback.

     */

    function addListener(element, listener) {

        var listeners = getState(element).listeners;

        if (!listeners.push) {

            throw new Error("Cannot add listener to an element that is not detectable.");

        }

        getState(element).listeners.push(listener);

    }

    /**

     * Makes an element detectable and ready to be listened for resize events. Will call the callback when the element is ready to be listened for resize changes.

     * @private

     * @param {object} options Optional options object.

     * @param {element} element The element to make detectable

     * @param {function} callback The callback to be called when the element is ready to be listened for resize changes. Will be called with the element as first parameter.

     */

    function makeDetectable(options, element, callback) {

        if (!callback) {

            callback = element;

            element = options;

            options = null;

        }

        options = options || {};

        function debug() {

            if (options.debug) {

                var args = Array.prototype.slice.call(arguments);

                args.unshift(idHandler.get(element), "Scroll: ");

                if (reporter.log.apply) {

                    reporter.log.apply(null, args);

                } else {

                    for (var i = 0; i < args.length; i++) {

                        reporter.log(args[i]);

                    }

                }

            }

        }

        function isDetached(element) {

            function isInDocument(element) {

                return element === element.ownerDocument.body || element.ownerDocument.body.contains(element);

            }

            return !isInDocument(element);

        }

        function isUnrendered(element) {

            // Check the absolute positioned container since the top level container is display: inline.

            var container = getState(element).container.childNodes[0];

            return getComputedStyle(container).width.indexOf("px") === -1; //Can only compute pixel value when rendered.

        }

        function getStyle() {

            // Some browsers only force layouts when actually reading the style properties of the style object, so make sure that they are all read here,

            // so that the user of the function can be sure that it will perform the layout here, instead of later (important for batching).

            var elementStyle            = getComputedStyle(element);

            var style                   = {};

            style.position              = elementStyle.position;

            style.width                 = element.offsetWidth;

            style.height                = element.offsetHeight;

            style.top                   = elementStyle.top;

            style.right                 = elementStyle.right;

            style.bottom                = elementStyle.bottom;

            style.left                  = elementStyle.left;

            style.widthCSS              = elementStyle.width;

            style.heightCSS             = elementStyle.height;

            return style;

        }

        function storeStartSize() {

            var style = getStyle();

            getState(element).startSize = {

                width: style.width,

                height: style.height

            };

            debug("Element start size", getState(element).startSize);

        }

        function initListeners() {

            getState(element).listeners = [];

        }

        function storeStyle() {

            debug("storeStyle invoked.");

            if (!getState(element)) {

                debug("Aborting because element has been uninstalled");

                return;

            }

            var style = getStyle();

            getState(element).style = style;

        }

        function storeCurrentSize(element, width, height) {

            getState(element).lastWidth = width;

            getState(element).lastHeight  = height;

        }

        function getExpandChildElement(element) {

            return getExpandElement(element).childNodes[0];

        }

        function getWidthOffset() {

            return 2 * scrollbarSizes.width + 1;

        }

        function getHeightOffset() {

            return 2 * scrollbarSizes.height + 1;

        }

        function getExpandWidth(width) {

            return width + 10 + getWidthOffset();

        }